<template>
  <div class="content">
    <div class="cloud-header">
      <h2 class="r-title-h2">新增轮播图</h2>
    </div>
    <div class="cloud-body">
      <div class="r-rchart-title">请填写轮播图信息</div>
      <Form :label-width="110" :model="data" :rules="validationRules" ref="form" :top="0.2" showErrorTip>
        <FormItem label="轮播图名称：" prop="title">
          <input type="text" v-model="data.title" v-width="200" placeholder="请输入轮播图名称" />
        </FormItem>
        <FormItem label="轮播图：" prop="image">
          <Upload v-model="data.image" :limit="1"></Upload>
        </FormItem>
        <FormItem label="轮播图状态：" prop="status">
          <h-switch v-model="data.status" :trueValue="1" :falseValue="0"></h-switch>
        </FormItem>
        <FormItem label="链接：" prop="url">
          <input type="text" v-model="data.url" v-width="400" />
        </FormItem>
        <FormItem label="排序号：" prop="sort" class="r-rchart-item">
          <NumberInput type="text" v-model="data.sort" v-width="200" /><span class="r-item-tips">请填写数字，数字越大越靠前</span>
        </FormItem>
      </Form>
      <div class="r-submit-button">
        <Button @click="intSubmit" color="primary"><i class="iconfont icon-save r-submit-icon"></i>保存</Button>
        <Button v-if="!id" @click="reset">重置</Button>
        <Button v-else @click="cancel"><i class="iconfont icon-cancel r-submit-icon"></i>取消</Button>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Upload from '@/components/upload/index'
export default {
  name: '',
  components:{
    Upload
  },
  data() {
    return {
      id:'',
      datatable_name:'banner',

      data: {
        image:'',
        title:'',
        url:'',
        sort:'',
        deleted:1,
        status:0,              // 1 显示。0隐藏
        creation_time:'',
      },
      validationRules: {
        required: ['title','image','url','sort']
      },
      format: 'YYYY-MM-DD'
    }
  },
  mounted(){
    if(this.$route.query.id){
      this.id = this.$route.query.id;
      this.getEditData();
    }
  },
  methods: {
    /**
     * 获取要编辑的数据
     * @return {[type]} [description]
     */
    async getEditData(){
      let ret = await this.$cloud.name(this.datatable_name).where({_id:this.id}).select();
      if (ret.length > 0) {
        this.data = ret[0];
      }else{
        this.$Message.error('网络异常，请稍后重试！')
      }
    },

    /**
     * 添加轮播图
     * @return {[type]} [description]
     */
    async intSubmit(){
      let validResult = this.$refs.form.valid();
      if(!this.id){
        // 新增轮播广告
        let ret = await this.$cloud.name(this.datatable_name).insert(this.data);
        if(ret){
            // 清空表单
            this.reset();
            this.$Message.success('新增轮播图成功！')
        }else{
            this.$Message.error('网络异常，请稍后重试！')
        }
      }else{
        let ret = await this.$cloud.name(this.datatable_name).where({_id:this.id}).update(this.data);
          if(ret){
            // 更新成功之后返回列表
            this.$Message.success('更新轮播图成功！')
            history.back();
          }else{
            this.$Message.error('网络异常，请稍后重试！')
          }
      }
    },

    /**
     * 重置表单
     * @return {[type]} [description]
     */
    reset(){
      //清空表单
      this.data = {
        image:'',
        title:'',
        url:'',
        sort:'',
        status:1,              // 1 显示。0隐藏
        creation_time:'',
      }
    },

    /**
     * 取消更新
     * @return {[type]} [description]
     */
    cancel(){
      history.back();
    }

  }
}

</script>
<style type="text/css" lang="less">
.r-submit-button {
  text-align: center;
  margin-top: 120px;

  button {
    margin: 0px 10px;
  }

  .r-submit-icon {
    margin-right: 5px;
  }
}

.r-rchart-title {
  color: #999;
  border-bottom: solid 1px #E4E4E4;
  padding-bottom: 10px;
  margin-bottom: 40px;
}

.r-rchart-upload {
  background-color: rgba(242, 242, 242, 1);
  width: 80px;
  height: 80px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #666;
  margin-bottom: 10px;
  cursor: pointer;

  i {
    font-size: 32px !important;
    color: #dfdfdf;
  }
}

.r-item-tips {
  color: #999999;
}

.h-form-item {
  margin: 10px 0;
}

.r-rchart-item .h-form-item-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .h-numberinput {
    margin-right: 10px;
  }

  .r-item-tips {
    color: #999999;
  }
}

</style>
